
<template>
  <div>
    <!-- <div class="selector-box">
      <div>
        <i type="iconweizhi" />
        <a-button :disabled="disabled" v-if="value.length == 0" type="link" @click="showMapSelector">选择地址
        </a-button>
        <a-button :disabled="disabled" v-else type="link" @click="showMapSelector">经度：{{value[0]}}
          纬度：{{value[1]}}</a-button>
      </div>
      <i v-if="value.length != 0 && !disabled" class="close-icon" type="iconai54" @click="clearLocation" />
    </div> -->

    <a-modal title="选择地址" :visible="isShowMap" width="80%" @ok="save" @cancel="closeModal">

      <a-row>
        <a-col :span="15">
          <a-input id="search" v-model="searchKey" placeholder="请输入地址"></a-input>
          <div class="tip-box beauty-scroll" id="searchTip"></div>
        </a-col>

        <a-col :span="9">
          <a-button type="link" @click="resetMap">重置</a-button>
        </a-col>
      </a-row>

      <div class="container">
        <el-amap :key="key" class="amap-box" :amap-manager="amapManager" :vid="'amap-vue' + key" :zoom="zoom"
          :plugin="plugin" :center="center" :events="events">
          <!-- 标记 -->
          <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
        </el-amap>
      </div>

      <p>当前地址为：{{address}}</p>
      <p>经纬度：({{lng}},{{lat}})</p>
    </a-modal>

  </div>
</template>
 
<script>
/**
 * 高德地图选点组件
 * 
 * @property {Array} value 地图坐标点
 * @property {Boolean} disabled 组件是否可用
 * 
 * @event {Function()} change 点击确认或清除坐标点
 * @return {Object} location 经纬度 / address 位置
 * 
 * @demo <by-amap-point-selector v-model="location" @change="changeLocation" />
 * */

import {
  AMapManager,
  lazyAMapApiLoaderInstance
} from 'vue-amap';

import VueAMap from 'vue-amap';
import Vue from 'vue';

let amapManager = new AMapManager();
let defaultPoint = [116.397451, 39.909187];

export default {
  name: 'ZhChoosePoint',
  props: {
    // 初始化位置
    value: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否显示
    isShow: {
      type: Boolean,
      default: false
    }
  },
  created () {
    // 初始化高德地图 
    Vue.use(VueAMap);
    VueAMap.initAMapApiLoader({
      key: '36ddb601d6af0f97ed9cf1d14ad72ec2',
      plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',
        'AMap.PlaceSearch',
        'AMap.Geolocation', 'AMap.Geocoder'
      ],
      v: '1.4.4',
      uiVersion: '1.0.11'
    });
  },
  data () {
    let _this = this;

    // 高德地图事件处理
    const events = {
      // 地图初始化完毕
      init () {
        lazyAMapApiLoaderInstance.load().then(() => {
          _this.initSearch()
        })
      },
      // 地图点击
      click (e) {
        _this.markers = []
        let {
          lng,
          lat
        } = e.lnglat
        _this.lng = lng
        _this.lat = lat
        _this.center = [lng, lat]
        _this.markers.push([lng, lat]);
        _this.getAddress(lng, lat).then(res => {
          _this.address = res.formattedAddress;
        });
      }
    };

    // 高德地图插件
    const plugin = [{
      // 定位
      pName: 'Geolocation',
      events: {
        init (o) {
          console.log('Geolocation:', o);

          // o是高德地图定位插件实例
          // o.getCurrentPosition((status, result) => {
          // 	if (result && result.position) {
          // 		// 设置经度
          // 		_this.lng = result.position.lng;
          // 		// 设置维度
          // 		_this.lat = result.position.lat;
          // 		// 设置坐标
          // 		_this.center = [_this.lng, _this.lat];
          // 		_this.defaultCenter = _this.center;
          // 		_this.markers.push([_this.lng, _this.lat]);
          // 		// 获取地址
          // 		_this.getAddress(_this.lng, _this.lat).then(res => {
          // 			_this.address = _this.searchKey = res.formattedAddress;
          // 		});
          // 	}
          // })
        },
        // click(e) {
        // 	console.log(e);
        // }
      }
    },
    {
      // 工具栏
      pName: 'ToolBar',
      events: {
        // init(instance) {
        // 	console.log(instance);
        // }
      }
    },
    {
      // 搜索
      pName: 'PlaceSearch',
      events: {
        // init(instance) {
        // 	console.log(instance)
        // }
      }
    }
    ];

    return {
      key: +new Date(),
      isShowMap: false, // 展示选点弹窗
      address: null, // 地址
      searchKey: '', // 搜索
      markers: [defaultPoint], // 地图标点
      center: defaultPoint, // 当前坐标位置
      zoom: 12, // 最大缩放比例
      lng: 0, // 经度
      lat: 0, // 纬度
      amapManager, // 高德地图管理器
      events, // 高德地图事件处理
      plugin, // 高德地图插件
    }
  },
  watch: {
    isShow (value) {
      this.isShowMap = value;
      if (value === true) {
        this.$nextTick(() => {
          this.resetMap();
        })
      }
    }
  },
  methods: {
    // 展示地图选点组件
    showMapSelector () {
      this.isShowMap = true;
      this.$nextTick(() => {
        this.resetMap();
      })
    },

    // 初始化搜索
    initSearch () {
      let vm = this
      let map = this.amapManager.getMap()
      AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
        var poiPicker = new PoiPicker({
          input: 'search',
          placeSearchOptions: {
            map: map,
            pageSize: 10
          },
          suggestContainer: 'searchTip',
          searchResultsContainer: 'searchTip'
        })
        vm.poiPicker = poiPicker
        // 监听poi选中信息
        poiPicker.on('poiPicked', function (poiResult) {
          let source = poiResult.source
          let poi = poiResult.item
          if (source !== 'search') {
            poiPicker.searchByKeyword(poi.name)
          } else {
            poiPicker.clearSearchResults()
            vm.markers = []
            let lng = poi.location.lng
            let lat = poi.location.lat
            let address = poi.cityname + poi.adname + poi.name
            vm.center = [lng, lat]
            vm.markers.push([lng, lat])
            vm.lng = lng
            vm.lat = lat
            vm.address = address
            vm.searchKey = address
          }
        })
      })
    },
    // 返回经纬度地址
    getAddress (lng, lat) {
      let geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: 'all'
      })
      return new Promise((resolve) => {
        geocoder.getAddress([lng, lat], function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.regeocode) {
              resolve(result.regeocode)
            }
          }
        })
      })
    },
    // 重置地图组件
    resetMap () {
      let tempPos = this.value.length > 0 ? this.value : defaultPoint;
      this.center = tempPos;
      this.markers = [tempPos];
      this.lng = tempPos[0];
      this.lat = tempPos[1];
      this.searchKey = '';

      // 延迟调用地址避免报错
      setTimeout(() => {
        this.getAddress(this.lng, this.lat).then(res => {
          this.address = res.formattedAddress;
        });
      }, 1000);
    },
    // 保存
    save () {
      this.change({
        address: this.address,
        location: [this.lng, this.lat]
      })
      this.closeModal();
    },
    // 清除当前位置
    clearLocation () {
      this.change({
        address: '',
        location: []
      })
    },
    // 修改数据
    change (res) {
      this.$emit('input', res.location);
      this.$emit('change', res);
    },
    // 退出
    closeModal () {
      this.isShowMap = false;
      this.$emit('onClose');
    }
  }
}
</script>
 
<style scoped lang="less">
// .container {
//   width: 100%;
//   height: 400px;
// }

// p {
//   margin: 0;
// }

// .m-b-10 {
//   margin-bottom: 10px;
// }

// .tip-box {
//   width: 100%;
//   max-height: 260px;
//   position: absolute;
//   top: 33px;
//   overflow-y: auto;
//   background-color: #fff;
//   z-index: 999;
// }

// .selector-box {
//   width: 300px;
//   padding: 0 10px;
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   border: 1px solid #d9d9d9;
//   background-color: #fff;

//   > div {
//     display: flex;
//     justify-content: flex-start;
//     align-items: center;
//   }
// }

// .close-icon {
//   color: rgba(0, 0, 0, 0.25);
// }
</style>